import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app) {
        // 自定义v-lazy-img 懒加载
        app.directive('lazy-img',
            {
                mounted(el, binding) {
                    // el 指令绑定的那个元素
                    // binding binding-value :指令后面加载的值
                    // console.log(el, binding.value)
                 const {stop} =    useIntersectionObserver(
                        el,
                        ([{ isIntersecting }],) => {
                            //  console.log(isIntersecting)
                            if (isIntersecting) {
                                el.src = binding.value
                                stop()
                            }
                        },
                    )

                }
            }
        )
    }
}